import React from "react";
import StoTable2 from "../components/StoTable2";
import { getStudents } from "../common/mockdata";

const students = getStudents(5, true);

const formatters = {
  name: (key: string, item: any) => <a href={`/${item.id}`}>{item[key]}</a>,
  // iq:(key:string,item:any) => <span style={{color:"orangered"}}>{item[key]}</span>,
  avatar: (key: string, item: any) => (
    <a href={`/${item.id}`}>
      <img style={{ width: 40 }} src={`${item[key]}`} alt="" />
    </a>
  ),
};

const actionBtns = [
  {
    name: "删除",
    callback: (item: any, index: number) => console.log("删除", item, index),
  },
  {
    name: "编辑",
    callback: (item: any, index: number) => console.log("编辑", item, index),
  },
  // { name: "Detail", callback: () => console.log("详情") },
];

const onSelectedItemsChanged = (items: Set<Record<string, any>>) => {
  console.log("onSelectedItemsChanged", items);
};

function TableDemo2() {
  return (
    <div>
      <h3>TableDemo</h3>
      <StoTable2
        arr={students}
        width={1400}
        formatters={formatters}
        sortables={Object.keys(students[0])}
        actionBtns={actionBtns}
        onSelectedItemsChanged={onSelectedItemsChanged}
      ></StoTable2>
    </div>
  );
}

export default TableDemo2;
